<template>
    <view :style="objColor">
        <!-- homeSub/pages/terminal/fault/fault.wxml -->
        <!-- 枪列表 -->
        <view v-if="!stationStatus">
            <view class="plie_list">
                <view class="plie_item">
                    <!-- <block>
                        <image :src="stationDetail.stationIcon || 'https://oos-cn.ctyunapi.cn/front-end/static/static/pic.png'" style="width: 140rpx;height: 120rpx;"></image>
                    </block> -->
                    <view class="item">
                        <view class="item_name">
                            <text>{{ stationDetail.stationName }}</text>
                        </view>
                        <view class="nextInfo">
                            充电桩名称 <text class="stationInfoVal">{{ stationDetail.pileName }}</text>
                        </view>
                        <view class="nextInfo">
                            充电桩编号 <text class="stationInfoVal">{{ stationDetail.pileNo }}</text>
                        </view>
                        <!--<view class="item_name">-->
                        <!--<text>{{ gunDetail.gunName }}</text>-->
                        <!--<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/slow.png" v-if="gunDetail.powerMode === 1"></image>-->
                        <!--<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/fast.png" v-else-if="gunDetail.powerMode === 2"></image>-->
                        <!--<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/exceed.png" v-else-if="gunDetail.powerMode === 3"></image>-->
                        <!--</view>-->
                        <!--<view class="item_info">-->
                        <!--单价-->
                        <!--<text class="price">{{ gunDetail.electPrice }}元</text>-->
                        <!--/度 | 功率{{ gunDetail.ratedPower }}KW-->
                        <!--</view>-->
                        <!--<view class="nextInfo">-->
                        <!--下阶段{{ gunDetail.nextStageTime ? gunDetail.nextStageTime : '&#45;&#45;' }} 单价{{ gunDetail.nextStageBalance ? gunDetail.nextStageBalance : '&#45;&#45;' }}元/度-->
                        <!--</view>-->
                    </view>
                </view>
            </view>
            <Upgrading :text1="iconList[status]['text']"
                       :icon="iconList[status]['src']"
                       :text2="iconList[status]['text2']"
                       iconStyle="width: 496rpx;height: 496rpx;"
            ></Upgrading>
            <view class="scanBtn" @tap="goDetails" v-if="status==8">查看充电详情</view>
            <!-- <view class="scanBtn" @tap="goScanCode" v-else v-show="isLogin">扫码充电</view> -->

            <template v-if="status!=8">
                <view class="scanBtn" v-if="!isCYCAPPInH5()">
                    <!-- #V2G功能 -->
                    <text v-if="isLogin" @tap="goScanCode">{{ isV2GOption ? '重新扫码' : '扫码充电' }}</text>
                    <text v-if="!isLogin" @tap="whetherCharge3">{{ isV2GOption ? '登录启动扫码' : '登录启动充电' }}</text>
                </view>
            </template>

        </view>
        <view v-else>
            <Upgrading :text1="iconList2[stationStatus]['text']"
                       :icon="iconList2[stationStatus]['src']"
                       iconStyle="width: 496rpx;height: 496rpx;"
            ></Upgrading>
        </view>
    </view>
</template>

<script>
	'use strict';
	import Upgrading from '@/components/upgrading/upgrading';
	var scanCode = require('./../../../../utils/scanCode.js');
	// exports.__esModule = true; // homeSub/pages/terminal/fault/fault.ts

	var https_1 = require('./../../../../api/https.js');
	export default {
		components: {
			Upgrading
		},
		data() {
			return {
                kycContent:'',//康亿创文本
                
				gunDetail: {
					gunName: '',
					powerMode: 0,
					electPrice: '',
					nextStageTime: false,
					nextStageBalance: false
				},

				pileNo: '',
				gunid: '',
				gunno: '',
				isInsert: '',
				stationDetail: '',
				status:null,
				stationStatus:null,
				iconList:{
                    '8':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/image-use.png',text:'请完成充电后再发起申请',text2:'您有车辆正在充电中'},
					'7':{src:'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/car.png',text:'当前充电设备正在维修中，暂时无法使用，请更换其他电枪或电桩！'},
					'6':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/image-use.png',text:'当前充电设备正在使用中，暂时无法使用，请更换其他电枪或电桩！'},
					'3':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/image-use.png',text:'当前充电设备正在使用中，暂时无法使用，请更换其他电枪或电桩!'},
					'5':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/image-off.png',text:'当前充电设备已经离线，暂时无法使用，请更换其他电枪或电桩！'},
					},
				iconList2:{
					'0':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/figure2.png',text:'当前充电站已关闭，暂时无法使用，请前往附近其他站点充电！'},
					'3':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/figure3.png',text:'当前充电站正在建设中，敬请期待！请先前往附近其他站点充电！'},
					'4':{src:'https://oos-cn.ctyunapi.cn/front-end/static/static/figure.png',text:'当前充电站正在维护中，暂时无法使用，请前往附近其他站点充电！'}
				},
                busId:'',

                isLogin: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			if (options.pileNo) {
				this.pileNo=options.pileNo
			}
			if (options.status) {
				this.status=options.status
			}
			if (options.stationStatus) {
				this.stationStatus=options.stationStatus
			}

			if (options.gunid) {
				this.gunid=options.gunid
			}

            if (options.busId) {
				this.busId=options.busId
			}

            if (options.gunno) {
				this.gunno=options.gunno
			}


            
			if (options.kycText) {
				this.kycContent = options.kycText
			}

            // 巨湾川逸充h5添加如果有充电中的订单直接跳充电中的页面
			// #ifdef H5
			if(this.isCYCAPPInH5()){
				if(uni.getStorageSync('token')){
					this.chargeInfos()
				}else{
					let gunDetailUrl = window.location.href
					uni.setStorageSync('gunDetailUrl',gunDetailUrl)
					uni.navigateTo({
						url: '/packagePersonal/pages/login/login'
					});
					return
				}
			}
			// #endif

			this.getPileDTOByNo();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			console.log(uni.currentPage)


            //移动端优化 未登录扫码进入枪详情后
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			}else{
				this.isLogin = false
			}
    },
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
            //登录启动充电
			whetherCharge3: function () {
				getApp().globalData.CHECK_LOGIN_Model({},'请先完成登录后再启动充电。')	
			},

			// 扫码
			goScanCode: async function () {
                //#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CAMERA')
					if (result !== 1){
						return
					}else{
						scanCode.stateOfCharge();
					}    
				//#endif
				//#ifdef MP-WEIXIN
					scanCode.stateOfCharge();
				//#endif
			},
			// 获取枪详情
			getPileDTOByNo: function () {
				var that = this;
				return https_1
					.getPileDTOByNo({
						pileNo: this.pileNo,
                        kycContent: this.kycContent,
                        sellerId: getApp().globalData.sellerId
					})
					.then(function (res) {
						if (res.code == 0) {
							var gunDTO_1 = {};
							var pluggable_1 = false;
							res.data.gunDTOList.map(function (item) {
								if (item.gunid == that.gunid) {
									item.electPrice = (item.electPrice / 100).toFixed(4);
									item.nextStageBalance = (item.nextStageBalance / 100).toFixed(4);
									gunDTO_1 = item;

									if (item.gunState == 2) {
										pluggable_1 = true;
									}
									that.gunno=item.gunno,
										that.isInsert=pluggable_1
								}
							});
                            console.log('-res.data.stationData,--', res.data);
                            
							that.stationDetail=res.data.stationData,
                            console.log('-stationDetail--', that.stationDetail);
                            that.stationDetail.pileName=res.data.pileName,
                            that.stationDetail.pileNo=res.data.pileNo,
								that.gunDetail=gunDTO_1
						} 
                        // 该二维码暂不支持,请重新扫描充电桩上其它二维码 50014 || 桩未上线投运 50015 || 站点未上线 50016
                        else if (res.code == 50014 || res.code == 50015 || res.code == 50016) {
                            uni.redirectTo({
                                url: '/homeSub/pages/terminal/fault/fault0131?pileText=' + res.msg
                            });
                        }
                        else {
							uni.showToast({
								title: res.msg,
								icon: 'error',
								duration: 2000
							});
						}
					});
			},

            // 充电详情
            goDetails:function(){
                uni.navigateTo({
                    url: `/echartsPages/pages/power/power?busId=${this.busId}&pileNo=${this.pileNo}&gunNo=${this.gunno}`
                });
            },

            //查询正在充电订单-#川逸充app内嵌h5
			chargeInfos: function() {
				var that = this;
				https_1.pageChargeServiceMonitorNew({
					current: 1,
					pageSize: 100,
					memberNo: uni.getStorageSync('tel')
				}).then(function(res) {
					if (res.code == 0) {
						that.chargingOrderList = res.data.data
			
						if (res.data.data.length) {
							that.goChargingOrder1()
						}
					}
				});
			},

            //充电中订单（单台）- #川逸充app内嵌h5
			goChargingOrder1: function() {
				uni.navigateTo({
					url: '/echartsPages/pages/power/power?busId=' +
						this.chargingOrderList[0].billNo +
						'&pileNo=' +
						this.chargingOrderList[0].pileNo +
						'&gunNo=' +
						this.chargingOrderList[0].gunNo
				});
			},
		}
	};
</script>
<style lang="less">
    @import '../../../../commin/commin.less'; /* homeSub/pages/terminal/fault/fault.wxss */

    page {
        background-color: #f5f7fa;
        padding-bottom: 100rpx;
    }

    .plie_list {
        .kuan (638rpx);
        background: linear-gradient(0deg, @white-color, #f4f6f8);
        .borders (2rpx, @white-color);
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        .borderradius (16rpx, 16rpx, 16rpx, 16rpx);
        .margins (16rpx, 24rpx, 0rpx, 24rpx);
        .paddings (44rpx, 32rpx, 40rpx, 32rpx);

        .plie_item {
            // display: flex;
            // align-items: center;

            .img {
                .kuangao (111rpx, 111rpx);
                background: @white-color;
                .borders (7rpx, @blue);
                opacity: 0.06;
                border-radius: 50%;
            }

            .img2 {
                .kuangao (100rpx, 100rpx);
                background: rgba(20, 135, 250, 0.06);
                border-radius: 50%;
                position: absolute;
                margin-left: 13rpx;
                line-height: 100rpx;
                text-align: center;
                .fontsize (24rpx);
                font-family: PingFangSC;
                font-weight: 400;
                color: @blue;
            }

            .status {
                .kuangao (111rpx, 111rpx);
                background: @white-color;
                .borders (7rpx, @text-color4);
                opacity: 0.06;
                border-radius: 50%;
            }

            .status3 {
                .kuangao (100rpx, 100rpx);
                background: rgba(144, 147, 153, 0.06);
                border-radius: 50%;
                position: absolute;
                margin-left: 13rpx;
                line-height: 100rpx;
                text-align: center;
                .fontsize (24rpx);
                font-family: PingFangSC;
                font-weight: 400;
                color: @text-color4;
            }

            .item {
                // .margins (0, 0, 0, 32rpx);
            }

            .item_name {
                .fontsize (30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @text-color2;
                display: flex;
                align-items: center;

                .item_img {
                    .kuangao (44rpx, 34rpx);
                    margin-left: 33rpx;
                }
            }

            .item_info {
                .margins (30rpx, 0, 30rpx, 0);
                .fontsize (26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;

                .price {
                    color: @orange;
                }
            }

            .nextInfo {
                .fontsize (26rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color:#909399;
                margin-top:25rpx;
            }
            .stationInfoVal{
                margin-left: 30rpx;
                color: #303133;
            }
        }

        .priceDetail {
            position: absolute;
            right: 57rpx;
            align-items: center;
            display: flex;
            .fontsize (24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @blue;
        }
    }

    .priceList {
        .paddings (0rpx, 34rpx, 0rpx, 34rpx);

        .priceItem {
            padding-bottom: 40rpx;
            border-bottom: 1rpx solid #dcdfe6;
            margin-top: 40rpx;

            .priceTop {
                display: flex;
                justify-content: space-between;

                .first {
                    display: flex;
                    align-items: center;

                    .txt {
                        .fontsize (30rpx);
                        .margins (0, 32rpx, 0, 15rpx);
                        font-family: PingFangSC;
                        font-weight: 400;
                        color: @text-color2;
                    }

                    .price_img {
                        .kuangao (39rpx, 31rpx);
                    }

                    .price_current {
                        .kuangao (56rpx, 32rpx);
                    }
                }

                .txt1 {
                    color: @orange;
                    .fontsize (32rpx);
                    font-family: DIN;
                    font-weight: bold;
                }

                .txt2 {
                    .fontsize (22rpx);
                    font-family: PingFangSC;
                    font-weight: 500;
                }

                .txt3 {
                    .fontsize (30rpx);
                    font-family: PingFang-SC-Medium;
                    font-weight: Medium;
                }
            }

            .servePrice {
                .fontsize (26rpx);
                padding-top: 31rpx;
                font-family: PingFangSC;
                font-weight: 400;
                color: @text-color3;
            }
        }
    }

    .carInfo {
        .kuangao (638rpx, 108rpx);
        .lineheight (108rpx);
        background: linear-gradient(0deg, #ffffff, #f4f6f8);
        .borders (2rpx, #FFFFFF);
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        .borderradius (16rpx, 16rpx, 16rpx, 16rpx);
        .margins (16rpx, 24rpx, 0rpx, 24rpx);
        .paddings (0, 32rpx, 0, 32rpx);
        display: flex;
        justify-content: space-between;

        .tip {
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
        }

        .plateNo {
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color4;
        }
    }

    .stopExplain {
        .kuan (638rpx);
        background: linear-gradient(0deg, @white-color, #f4f6f8);
        .borders (2rpx, @white-color);
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        .borderradius (16rpx, 16rpx, 16rpx, 16rpx);
        .margins (16rpx, 24rpx, 0rpx, 24rpx);
        .paddings (40rpx, 32rpx, 37rpx, 32rpx);
        .lineheight (48rpx);

        .explain {
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
        }

        .tip {
            .fontsize (24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color4;

            .txt {
                .fontsize (22rpx);
            }
        }

        .explainCost {
            display: flex;
            justify-content: space-between;

            .time {
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;
            }

            .price {
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }
        }
    }

    .payType {
        .kuan (638rpx);
        background: linear-gradient(0deg, @white-color, #f4f6f8);
        .lineheight (60rpx);
        .borders (2rpx, @white-color);
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        .borderradius (16rpx, 16rpx, 16rpx, 16rpx);
        .margins (16rpx, 24rpx, 0rpx, 24rpx);
        .paddings (40rpx, 32rpx, 37rpx, 32rpx);

        .title {
            display: flex;
            justify-content: space-between;

            .txt1 {
                .fontsize (30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @text-color2;
            }

            .txt2 {
                display: flex;
                align-items: center;
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @blue;
            }
        }

        .radio {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .account {
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;

                .money {
                    color: @orange;
                }
            }
        }
    }

    .setting {
        .kuan (638rpx);
        background: linear-gradient(0deg, @white-color, #f4f6f8);
        .lineheight (60rpx);
        .borders (2rpx, @white-color);
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        .borderradius (16rpx, 16rpx, 16rpx, 16rpx);
        .margins (16rpx, 24rpx, 60rpx, 24rpx);
        .paddings (40rpx, 32rpx, 37rpx, 32rpx);

        .setting_title {
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
        }

        .priceType {
            display: flex;
            flex-wrap: wrap;

            .type {
                .kuangao (170rpx, 64rpx);
                .lineheight (64rpx);
                background: #f5f7fa;
                .borderradius (32rpx, 32rpx, 32rpx, 32rpx);
                text-align: center;
                .fontsize (30rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
                .margins (36rpx, 24rpx, 0, 0);
            }

            .type_action {
                background: rgba(20, 135, 250, 0.06);
                .borders (1rpx, @blue);
                .borderradius (32rpx, 32rpx, 32rpx, 32rpx);
                .fontsize (30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @blue;
            }

            .custom {
                display: flex;
                align-items: center;
                margin-top: 36rpx;
                .fontsize (30rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;

                .custom_img {
                    margin-left: 23rpx;
                    .kuangao (26rpx, 27rpx);
                }

                .custom_input {
                    .kuan (150rpx);
                    text-align: center;
                    .fontsize (28rpx);
                    color: @text-color3;
                    border-bottom: 1rpx solid @text-color3;
                }
            }
        }

        .setting_tip {
            .fontsize (24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @yellow;
            margin-top: 36rpx;
        }
    }

    .fot_operation {
        position: fixed;
        bottom: 0;
        z-index: 2;
        display: flex;
        .kuangao (616rpx, 88rpx);
        .paddings (10rpx, 32rpx, 10rpx, 102rpx);
        background: linear-gradient(0deg, #ffffff, #f4f6f8);
        border: 2rpx solid rgba(255, 255, 255, 0.55);
        box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);

        .reFresh {
            .fontsize (24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
            text-align: center;
            .margins (10rpx, 101rpx, 0, 0);

            .fot_img {
                .kuangao (34rpx, 33rpx);
            }
        }

        .fot_btn {
            .kuangao (468rpx, 88rpx);
            .borderradius (44rpx, 44rpx, 44rpx, 44rpx);
            text-align: center;
            .lineheight (88rpx);
            .fontsize (34rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @white-color;
        }
        .fot_btn1 {
            background: linear-gradient(105deg, #2b99ff, #1b8cf5);
        }
        .fot_btn2 {
            background: #c0c4cc;
        }
    }
    .rechargeTitle {
        .fontsize (34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @text-color2;
    }
    .priceType1 {
        display: flex;
        flex-wrap: wrap;

        .type1 {
            .kuangao (180rpx, 64rpx);
            .lineheight (64rpx);
            background: #f5f7fa;
            .borderradius (32rpx, 32rpx, 32rpx, 32rpx);
            text-align: center;
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
            .margins (36rpx, 42rpx, 0, 0);
        }

        .type_action1 {
            background: rgba(20, 135, 250, 0.06);
            .borders (1rpx, @blue);
            .borderradius (32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @blue;
        }

        .custom1 {
            display: flex;
            align-items: center;
            margin-top: 36rpx;
            .fontsize (30rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;

            .custom_img1 {
                margin-left: 23rpx;
                .kuangao (26rpx, 27rpx);
            }

            .custom_input1 {
                .kuan (150rpx);
                text-align: center;
                .fontsize (28rpx);
                color: @text-color3;
                border-bottom: 1rpx solid @text-color3;
            }
        }
    }
    .rechargeBtn {
        .kuangao (400rpx,88rpx);
        .lineheight (88rpx);
        background: linear-gradient(105deg, #2b99ff, #1b8cf5);
        box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        .borderradius (44rpx,44rpx,44rpx,44rpx);
        text-align: center;
        .fontsize (30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @white-color;
        .margins (83rpx,0,0,115rpx);
    }

    .turn_img {
        .kuangao (16rpx, 27rpx);
        margin-left: 17rpx;
    }

    .price_popup {
        width: 702rpx !important;
        height: 691rpx;
        margin: 0 24rpx 26rpx 24rpx;
        background: linear-gradient(0deg, #ffffff, #f4f6f8);
        border: 2rpx solid #ffffff;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
    }
    .scanBtn {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        background: var(--btnColor);
        box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @white-color;
        .lineheight(88rpx);
    }
</style>
